<template>
  <div>
    <section id="folding">
      <p
        class="folding-title"
        :class="{ active: isActive }"
        data-toggle="collapse"
        :data-target="'#collapse' + title"
        aria-expanded="true"
        :aria-controls="'collapse' + title"
        @click="select"
      >
        <slot name="title"> 此处内容为空 </slot>
        <i class="lni-chevron-right"></i>
      </p>
      <div
        class="folding-comtent collapse"
        :id="'collapse' + title"
        ref="foldingAttr"
      >
        <div class="folding-text" :class="{ openDot: openDot }">
          <slot name="content">
            <p>此处内容为空</p>
          </slot>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "title",
    },
    isSelect: {
      type: Boolean,
      default: false,
    },
    openDot: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isActive: this.isSelect,
    };
  },
  created() {},
  mounted() {
    if (this.isSelect) {
      $(this.$refs.foldingAttr).addClass("show");
    }
  },

  methods: {
    select() {
      this.isActive = !this.isActive;
      setTimeout(() => {
        if (this.isActive != $(this.$refs.foldingAttr).hasClass("show")) {
          this.isActive = $(this.$refs.foldingAttr).hasClass("show");
        }
      }, 1200);
    },
  },
};
</script>

<style scoped>
#folding {
  border: 1px solid #dee2e6;
  border-radius: 10px;
  margin: 10px 0;
  overflow: hidden;
}
#folding .folding-title {
  position: relative;
  padding: 15px;
  margin: 0 !important;
  background-color: #eee;
  color: #000;
  border-radius: 10px 10px 0 0;
  font-size: 1.3rem;
  line-height: 1.2;
  font-weight: 700;
}
#folding .folding-title i {
  position: absolute;
  top: 15px;
  font-size: 20px;
  line-height: 30px;
  color: #ccc;
  right: 10px;
  transition: all 0.5s;
}
#folding .folding-title.active i {
  transform: rotate(90deg);
}
#folding .folding-comtent {
  overflow: hidden;
  /* height: 0; */
  transition: all 0.5s;

  line-height: 1.618;
  color: #000;
}
#folding .folding-comtent .folding-text {
  padding: 15px;
}
#folding .folding-comtent .folding-text p,
#folding .folding-comtent .folding-text span.p {
  display: block;
  margin-left: 10px;
  margin-bottom: 0;
  font-weight: 700;
  text-indent: 0;
}
#folding .folding-comtent .folding-text span {
  display: block;
  text-indent: 2em;
}
/* #folding .folding-comtent .openDot span:nth-child(even)  {
  color: #262626;
}
#folding .folding-comtent .openDot span:nth-child(odd)  {
  background-color: #f9f9f9;
} */
</style>
